/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-03 17:02:31
 * @LastEditTime : 2023-08-25 10:22:59
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\jtgj\Home.jsx
 * @Description  :
 */

import { HomeTop, HomeLeft, HomeRight } from './Template'
import { AllProvince } from './Data'
import { useNavigate } from 'react-router-dom'
import { TemplateMap002 } from '../Assets/Template/TemplateMap'
import { MapA05 } from '../Assets/Template/Map'

import { useEventEmitter, useRequest } from 'ahooks'
import { Http } from '../../../Common/Api'
import { ICON } from '../../../Common/Configure/Icon'
import { FrontModalBox } from '../Assets/Modal'
import { useEffect, useState } from 'react'
import { project } from '../../../Common/Data'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'

const { imageUrl } = project[window.location.hostname]

const Left = ({ data }) => {
    const Navigate = useNavigate()
    const HomeLeftOne = [
        { uuid: 1, img: 'HomeLeft001.png', label: '人员', value: 'personCount', unit: '人' },
        { uuid: 2, img: 'HomeLeft002.png', label: '批复资金计划', value: 'fundApprovalAmount', unit: '家' },
        { uuid: 3, img: 'HomeLeft003.png', label: 'AI报警数', value: 'aiPicturesCount', unit: '条' },
        { uuid: 4, img: 'HomeLeft004.png', label: '安全管控数量', value: 'securityCount', unit: '条' },
    ]

    const HomeLeftTwo = [
        {
            uuid: 1,
            color: 'rgba(29, 229, 231, 1)',
            background: 'rgba(51, 114, 255, 0.2)',
            label: '累计完成收入',
            value: '收入',
            unit: '万元',
        },
        {
            uuid: 2,
            color: 'rgba(249, 251, 95, 1)',
            background: 'rgba(29, 229, 231, 0.2)',
            label: '累计完成利润',
            value: '利润',
            unit: '万元',
        },
        {
            uuid: 3,
            color: 'rgba(29, 229, 231, 1)',
            background: 'rgba(51, 114, 255, 0.2)',
            label: '累计完成比例',
            value: '利润率',
            unit: '%',
        },
    ]

    const HomeLeftThr = [
        { uuid: 1, label: '公路工程', value: '45b543c1-b68e-4fc0-8e23-6ed43bb2b301', icon: 'gaosu' },
        { uuid: 2, label: '公路养护', value: '45b543c1-b68e-4fc0-8e23-6ed43bb2b302', icon: 'shigong05' },
        { uuid: 3, label: '市政公用工程', value: '45b543c1-b68e-4fc0-8e23-6ed43bb2b303', icon: 'gejizhengfu' },
        { uuid: 4, label: '房屋建筑', value: '45b543c1-b68e-4fc0-8e23-6ed43bb2b304', icon: 'qiye_mianxing' },
        { uuid: 5, label: '港口与航道', value: '45b543c1-b68e-4fc0-8e23-6ed43bb2b305', icon: 'chuanbo' },
        { uuid: 6, label: '水利水电工程', value: '45b543c1-b68e-4fc0-8e23-6ed43bb2b306', icon: 'daqiao2' },
        { uuid: 7, label: '其他类', value: '45b543c1-b68e-4fc0-8e23-6ed43bb2b307', icon: 'hutonglijiao' },
    ]

    const [DataThr, setDataThr] = useState()

    const [DataTwo, setDataTwo] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setDataTwo(res)
        },
    })
    const { runAsync: getCount } = useRequest(Http, { manual: true, onSuccess: res => setDataThr(res) })

    useEffect(() => {
        runAsync({ url: 'getCost' })
        getCount({ url: 'getEngineeringTypeCount' })
    }, [runAsync, getCount])

    const [OptionsCall, setOptionsCall] = useState()

    return (
        <HomeLeft>
            <div className="Left">
                <div>
                    <div className="HomeTitle">工建智慧建造平台介绍</div>
                    <div>
                        {HomeLeftOne.map(({ uuid, img, label, value, unit }) => (
                            <div
                                key={uuid}
                                onClick={() => {
                                    if (uuid === 1) {
                                        setOptionsCall({
                                            type: 'TableList',
                                            data: {
                                                title: '人员统计',
                                                type: 'JTGJHomeLeft',
                                            },
                                        })
                                    }
                                    if (uuid === 2) {
                                        setOptionsCall({
                                            type: 'TableList',
                                            data: { title: '批复资金计划详情', type: 'JTGJFlowTable' },
                                        })
                                    }
                                    if (uuid === 3) {
                                        Navigate('/Front/Other/OneA01')
                                    }
                                    if (uuid === 4) {
                                        Navigate('/Front/Other/ThrA01')
                                    }
                                }}
                            >
                                <img src={imageUrl + img} alt="" />
                                <div>{label}</div>
                                <div>
                                    {uuid === 1 ? 738 : data[value]} {unit}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div>
                    {DataThr &&
                        HomeLeftThr.map(({ uuid, value, label, icon }) => (
                            <div
                                key={uuid}
                                onClick={() => {
                                    // setOptionsCall({
                                    //     type: 'TableList',
                                    //     data: {
                                    //         title: `${label}详情`,
                                    //         type: 'JTGJHomeTopTwo',
                                    //         uuid: value,
                                    //     },
                                    // })
                                    setOptionsCall({
                                        type: 'ProjectDetail',
                                        data: {
                                            title: `${label}详情`,
                                            engineeringType: value,
                                        },
                                    })
                                }}
                            >
                                {ICON[icon]}
                                <div>
                                    <div>{label}</div>
                                    <div>{DataThr[value]}个</div>
                                </div>
                            </div>
                        ))}
                </div>

                <div onClick={() => Navigate('/Front/Other/FouA01')}>
                    {HomeLeftTwo.map(({ uuid, color, background, label, value, unit }) => (
                        <div key={uuid} style={{ background }}>
                            <div style={{ background: color }} />
                            <div>{label}</div>
                            <div>
                                {DataTwo && DataTwo[value]} {unit}
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            <FrontModalBox OptionsCall={OptionsCall} />
        </HomeLeft>
    )
}

const Right = ({ ActiveEvent, data }) => {
    const Navigate = useNavigate()
    const [OptionsCall, setOptionsCall] = useState()
    const OpenAI = () => setOptionsCall({ type: 'AIBox001', data: { title: '工建管家' } })
    const [Active, setActive] = useState(data[0].children[0].uuid)
    const [Select, setSelect] = useState([data[0].uuid])

    return (
        <HomeRight>
            <div className="Right">
                <img src={imageUrl + 'intelligence.gif'} alt="" onClick={OpenAI} />
                <div className="RightMenu">
                    {data.map(({ uuid, tableName, children }) => (
                        <div key={uuid} className="MenuItem">
                            <div
                                key={uuid}
                                className="MenuOne"
                                onClick={() => {
                                    if (Select.includes(uuid)) setSelect([...Select.filter(item => item !== uuid)])
                                    else setSelect([...Select, uuid])
                                }}
                            >
                                <div>{tableName}</div>
                                {Select.includes(uuid) ? <CaretUpOutlined /> : <CaretDownOutlined />}
                            </div>
                            <div className="MenuTwo" style={{ height: Select.includes(uuid) ? '100%' : 0 }}>
                                {children?.map(({ tableName, uuid }) => (
                                    <div
                                        key={uuid}
                                        className={Active === uuid ? 'active' : ''}
                                        onClick={() => {
                                            ActiveEvent.emit(uuid)
                                            setActive(uuid)
                                        }}
                                    >
                                        {tableName}
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
                {Active !== '40491731-928e-4b02-aa30-f45f4a3a563e' && (
                    <div className="Button">
                        <div onClick={() => Navigate(`/Front/Page/OneOne?uuid=${Active}`)}>进入该公司</div>
                    </div>
                )}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </HomeRight>
    )
}

const Home = () => {
    const [NavList, setNavList] = useState()
    const [TopData, setTopData] = useState()
    const [LeftData, setLeftData] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list } = res
            const [{ companyCount, projectCount, aiPicturesCount, fundApprovalAmount, personCount, securityCount }] =
                list
            setTopData({ companyCount, projectCount })
            setLeftData({ personCount, fundApprovalAmount, aiPicturesCount, securityCount })
        },
    })

    const { runAsync: getProject } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setNavList(res)
            getList({ url: 'getJTGJProjectCountByCompanyUuid', data: { OrganizationUuid: res[0].children[0].uuid } })
        },
    })
    const { runAsync: getList } = useRequest(Http, { manual: true, onSuccess: res => MapEvent.emit(res) })

    useEffect(() => {
        runAsync({ url: 'getJTGJGeneralSituation' })
        getProject({ url: 'getCompanyListByOrganizationType' })
    }, [runAsync, getProject])

    const ActiveEvent = useEventEmitter()
    ActiveEvent.useSubscription(val => {
        getList({ url: 'getJTGJProjectCountByCompanyUuid', data: { OrganizationUuid: val } })
    })

    const MapEvent = useEventEmitter()

    const [OptionsCall, setOptionsCall] = useState()

    const MapClickEvent = useEventEmitter()
    MapClickEvent.useSubscription(val => {
        setOptionsCall({
            type: 'ProjectDetail',
            data: { title: `地市详情`, address: val },
        })
    })

    return (
        <div className="HomeBox">
            <MapA05 MapEvent={MapEvent} MapClickEvent={MapClickEvent} />
            {/* <TemplateMap002
                mapId="230000"
                AllProvince={AllProvince}
                MapEvent={MapEvent}
                MapClickEvent={MapClickEvent}
            /> */}
            {TopData && <HomeTop data={TopData} type={1} />}
            {LeftData && <Left data={LeftData} />}
            {NavList && <Right ActiveEvent={ActiveEvent} data={NavList} />}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export default Home
